import React, { useRef, useContext } from 'react';
import {
  View, TouchableOpacity, StyleSheet,
} from 'react-native';

import { Dialog, Tip } from 'beeshell';

import moment from 'moment';
import { observer } from 'mobx-react-lite';
import Avatar from './common/Avatar';
import { colors, sizes } from '../constants/theme';
import Text from './common/Text';
import Http from '../service/http';
import requestCheck from '../utils/RequestCheckUtil';
import MessageStore from '../store/messageStore';

const renderHeadText = (type, fUser, toUser) => {
  if (type === 'sent') {
    return `发送至: ${toUser.map(({ username }) => username).join('、')}`;
  }
  return `来自: ${fUser}`;
};

function MessageItem({
  item, type, navigation, refresh, setRefresh
}) {
  const dialog = useRef(null);

  const { unReadNum, setUnReadNum } = useContext(MessageStore);
  const {
    fromUser, content, process, device, time, messageId, toUser
  } = item;
  console.log(item);

  const { username: fUser } = fromUser;


  const showDialog = () => {
    dialog.current.open();
  };

  const readMessage = async () => {
    const res = await Http.readMessage({}, undefined, undefined, `/${messageId}`);
    const callBack = () => {
      setRefresh(refresh + 1);
      setUnReadNum(unReadNum - 1);
      Tip.show('成功');
    };
    requestCheck(res, callBack, navigation);
  };

  return (
    <>
      <TouchableOpacity onPress={() => showDialog()}>
        <View style={styles.item}>
          {/*  replace with Avatar if we have */}
          <Avatar size={35} color={colors.gray3} />
          <View style={{ marginLeft: 6 }}>
            <Text style={{ color: colors.gray, fontSize: 14 }}>
              {renderHeadText(type, fUser, toUser)}
            </Text>
            <Text style={{ marginTop: 6, fontSize: sizes.base }}>{content}</Text>
            <Text style={{ marginTop: 6, fontSize: 14, color: colors.gray2 }}>
              {moment(time).fromNow()}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
      {/* detail message */}
      <Dialog
        ref={dialog}
        header={(
          <View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 10 }}>
            <Text bold size={16}>
              {renderHeadText(type, fUser, toUser)}
            </Text>
          </View>
        )}
        body={(
          <View style={styles.dialogContent}>
            <View style={{ paddingVertical: 10, marginVertical: 10 }}>
              <Text style={{ textAlign: 'center', fontSize: 18 }}>{content}</Text>
            </View>
            <View style={styles.dialogFooter}>
              <Text style={styles.dialogFooterMeta}>{`工艺流程: ${process}`}</Text>
              <Text style={styles.dialogFooterMeta}>{`工序: ${device}`}</Text>
            </View>
          </View>
        )}
        cancelable
        confirmCallback={
          type === 'unread' ? () => { readMessage(); } : null
        }
        confirmLabelText={type === 'unread' ? '标为已读' : '确定'}
      />
    </>
  );
}

export default observer(MessageItem);

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    paddingTop: 10,
    paddingBottom: 3,
    marginTop: 3,
    borderBottomColor: colors.gray3,
    borderBottomWidth: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  dialogContent: {
    margin: 15
  },
  dialogFooter: {
    alignItems: 'flex-end',
  },
  dialogFooterMeta: {
    fontSize: 14,
    color: colors.gray
  }
});
